<template>
	<textarea type="text" v-model="text" />
	<p class="phonita-render" v-for="text in phitext" :key="text">{{ text }}</p>
</template>

<script lang="ts" setup>
import { Phonita } from "@/utils/phomina";
import { ref, computed } from "vue";

const p = Phonita.useInternalDictionary();

const text = ref("");
const phitext = computed(() => p.parse(text.value).split("\n"));
</script>

<style>
textarea {
	width: 600px;
	padding: 10px 5px;
	font-size: 15px;
}

.phonita-render {
	font-family: "system-ui,-apple-system", "Segoe UI", "Roboto", "Helvetica Neue",
		Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>
